<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /*元素选择器  选择标签*/
        p {
            color: blue;
            font-family: "kaiti";
        }
        /*id选择器*/
        #highlight {
            color: red;
        }
        /*类选择器*/
        .class {
            color: burlywood;
        }
        /*通用选择器  对所有元素*/
        * {
            font-size: larger;
        }
        /*子代选择器*/
        .father >.son {
            color: blueviolet;
        }
        /*后代选择器*/
        .father h3{
            color: chartreuse;
        }
        /*兄弟选择器*/
        p + span {
            color :cadetblue;
        }
        /*伪类选择器  悬停效果相关*/
        #element:hover {
            background-color: aquamarine;
        }

    </style>
</head>
<body>
    <p>元素选择器</p>
    <p>元素选择器</p>
    <p id="highlight">id选择器</p>
    <p class="class">类选择器</p>
    <p class="class">元素选择器</p>
    <div class="father">
        <p class="son">子代</p>
        <div>
            <h3 class="grandson">孙子——后代</h3>
        </div>
        <h1>选择器</h1>
    </div>

    <span>后代选择器</span><br>
    <p style="color:black;">兄弟选择器</p>
    <span >后代选择器</span>

    <span id="element">伪类选择器</span>
</body>
</html>